<template>
    <div>
        <div class="back-skillmodify">
            <div class="gos" @click="GoBacks"> <i class="iconfont icon-fanhui3"></i>返回</div>
        </div>
        <PostInfo :title = 'title' :list = 'list' @closed='close'></PostInfo>
        <div class="jx-content modifySkill">
            <el-form  :model="formData" ref="formData"  class="demo-dynamic"  label-width="150px" >
                <el-form-item label="工作领域 :" prop="skillName"  class="skills">
                    <el-input  v-model="formData.skillName" maxlength="12" class="modifyInput"  show-word-limit></el-input>
                </el-form-item>
                <div class="lins"></div>
                <el-col :span="11" class="list" v-for="(item, index) in formData.skill"  :key="item.id">
                    <el-form-item   label="工作任务：" :prop="'skill.' + index + '.name'" :rules="{ required: true, message: '请输入掌握技能点', trigger: 'blur' }" >
                        <el-input   type="text"  v-model.trim="item.name"  class="modifyInput"  placeholder="请输入掌握技能点"  @change="testInput(item)" maxlength="100"  show-word-limit></el-input>
                    </el-form-item>
                    <div  v-for="(item1, index2) in item.childrenList"  :key="item1.index2">
                        <el-form-item label="学习知识点：" class="point" :prop="'skill.' + index + '.childrenList.' + index2 + '.name'" :rules="{ required: true, message: '请输入学习知识点', trigger: 'blur' }">
                            <el-input type="textarea" v-model.trim="item1.name"  class="modifyInput"  show-word-limit placeholder="请输入学习知识点"  @change="testInput2(item)"  maxlength="500"></el-input>
                        </el-form-item>
                        <div  v-for="(item2, index3) in item1.childrenList"  :key="item2.index3">
                            <el-form-item label="关联课程：" :prop="'skill.' + index + '.childrenList.' + index2 + '.childrenList.' + index3 + '.name'" :rules="{ required: true, message: '请选择关联课程', trigger: 'change' }">
                                <el-select  v-model="item2.name" placeholder="请选择关联课程"  @change="e => handel(e, item1.childrenList,item1)">
                                    <el-option v-for="(item3,index) in formData.options" :key="index" :label="item3.name" :value="item3.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="delete-Introduce" @click="deleteList(item)" v-if="formData.skill.length>1" >
                        <i class="iconfont icon-jian3"></i>
                    </div>
                </el-col>
                 <div  class="buttonAdd"  @click="buttonAdd">
                    <p class='add'>+</p>
                    <p>添加掌握技能点</p>
                </div>
                <div class="save">
                    <el-button class="button-style" @click="saves('formData')">保 存</el-button>
                </div>
            </el-form>

        </div>
    </div>
</template>

<script>
    import PostInfo from '@/components/PostInfo'
    export default {
        components: {
            PostInfo
        },
        data() {
            return {
                //子集的详情id
                id:'',
                //父级id
                parentId:'',
                //传给儿子
                title:'',
                list:[],
                //传给后太值
                ARR:[],
                formData:{
                    id:'',
                    level:'',
                    parentId:'',
                    options: [],
                    skillName:'',
                    skill:[
                        {
                            name:'',
                            childrenList:[
                                {
                                    name:'',
                                    childrenList:[
                                        {
                                            name:''
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                    //修改集合
                    modifyList:{},
                    //春野页面传
                    downloadPathName:''

                }
            }
        },
        created(){
            this.id = this.$route.query.id  //添加的id
            this.parentId = this.$route.query.parentId  //添加的id
            this.downloadPathName = this.$route.query.downloadPathName  //添加的id
            this.init()
            this.relevanceCourse()
            this.postInfo()
        },
        methods:{
            init(){
                let self = this
                self.$http.get('/tes/course/querySkillInfo?skillId='+self.id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        //this.title = res.data[0].name
                        // this.list.push(res.data[0].childrenList[0].name)
                        // this.list.push(res.data[0].childrenList[0].id)

                        this.formData.skillName = res.data[0].name
                        this.formData.level = res.data[0].level
                        this.formData.parentId = res.data[0].parentId
                        this.formData.id = res.data[0].id
                        this.formData.skill = res.data[0].childrenList

                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //获取岗位职责内容
            postInfo(){
                let self = this
                self.$http.get('/tes/course/querySkillInfo?skillId='+self.parentId).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.title = res.data[0].name
                        this.list.push(res.data[0].childrenList[0].name)
                        this.list.push(res.data[0].childrenList[0].id)
                        //console.log(res.data[0].childrenList[0].id,99)

                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //获取关联课程
            relevanceCourse(){
                let self = this
                self.$http.get('/tes/course/querySkillInfoCourse').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.formData.options = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            close(val){
                if(val){
                  this.list[0] = val
                }
            },
            //点击返回
            GoBacks(){
                window.history.back(-1)
            },
            //添加
            buttonAdd(){
                var Arr ={
                           name:'',
                           childrenList:[
                               {
                                   name:'',
                                   childrenList:[
                                       {
                                           name:''
                                       }
                                   ]
                               }
                           ]
                       }
                this.formData.skill.push(Arr)
            },
            //删除
            deleteList(item){
                var index = this.formData.skill.indexOf(item)
                if (index !== -1 && this.formData.skill.length >1)  {
                    this.formData.skill.splice(index, 1)
                }
            },
            //
            testInput(item){
                //如果没有id说明是添加
                if(!item.id){
                    item.parentId = this.formData.id
                    item.level = 4
                }
            },
            testInput2(item){
                //如果没有id说明是添加
                if(!item.id){
                   item.childrenList[0].level = 5
                }

            },
            handel(item, list,item1){
                //如果没有id说明是添加
                //list.shift()
                //list.push(this.formData.options.find(t => t.name == item))
                //item1 代表父元素
                console.log(item1,55)
                if(!item1.id){
                    let copy = this.formData.options.find(t => t.name == item)
                    this.$set(list[0],'name',copy.name)
                    this.$set(list[0],'iconValue',copy.iconValue)
                    this.$set(list[0],'courseId',copy.courseId)
                    this.$set(list[0],'level',6)
                }else{
                    let copy = this.formData.options.find(t => t.name == item)
                    // this.$set(list[0],'id',copy.id)
                    this.$set(list[0],'courseId',copy.courseId)
                    this.$set(list[0],'iconValue',copy.iconValue)
                    // this.$set(list[0],'parentId',copy.parentId)
                    this.$set(list[0],'level',6)
                }
                // if(!list[0].id){
                //     list[0].level = 6
                // }
            },

            //保存
            saves(formData){
                let self = this
                self.ARR = []
                let obj = {}
                obj.name = this.formData.skillName
                obj.id = this.formData.id
                obj.level = this.formData.level
                obj.parentId = this.formData.parentId
                obj.childrenList = self.formData.skill
                self.ARR.push(obj)
                //console.log(self.ARR,88888)
                self.$refs[formData].validate((valid) => {
                    if (valid) {
                        self.$confirm('该变更将影响系统中所有用户的‘岗位-技能’的展示，确定修改么？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            self.$http.post('/tes/course/saveOrUpdateSkill',self.ARR).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    self.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })
                                    self.init()
                                    self.relevanceCourse()
                                    self.$router.push({
                                        path:'/Teaching/PostSkills',
                                        query:{
                                            postId: this.parentId,
                                            pathName: this.downloadPathName
                                        }
                                    })
                                }else{
                                    this.$message.error(res.message)
                                }
                            })
                        })

                    } else {
                        console.log('error submit!!');

                    }
                });
            }
        }
    }
</script>
<style>
.modifyInput  .el-input__suffix{
    right: inherit;
    bottom:-6px !important;
    color: #cbcbcb;
    top: inherit
}
</style>
<style scoped>

.el-input>>>.el-input__count-inner{
    padding-left: 15px;
    color: #d2d2d2;
}
.el-textarea{
    width: 96%;
}
.skills>>>.el-form-item__label{
    padding-right: 19px;
}
 .el-form-item>>>textarea {
    height: 110px;
    resize: none;
    width: 84.5%;
}
.el-input>>>.el-input__inner{
    width:295px;
}
.el-select>>>.el-input__inner{
    width: 250px;
}
.el-textarea__inner>>>.el-form-item__error{
    top:140px;
}
 .point>>>.el-form-item__content{
    height: auto;
}
.el-textarea>>>.el-input__count{
    right: 0px;
    bottom:-5px;
    color: #d2d2d2;

}
.el-form-item__content{
    line-height:0
}
.el-textarea>>>.el-textarea__inner{
    color: #727272;
}
.list>>>.el-form-item__label{
    color: #474747
}
</style>
<style lang="scss" scoped>
.back-skillmodify{
    width: 1200px;
    // margin: 0 auto;
    .gos{
        float: right;
        height: 55px;
        line-height: 55px;
        cursor: pointer;
        position: relative;
        left: 350px;
        &:hover{
            color: #1277eb
       }
    }
}
.modifySkill{
    margin: 20px auto;
    // overflow: hidden;
    width: 1200px;

    .point{
        height: 113px;
    }
    .lins{
        border: 1px solid #f5f5f5;
    }


    .buttonAdd{
        height: 265px;
        line-height: 243px;
        border: 1px dashed #d9d9d9;
        width: 400px;
        color: #8f8f8f;
        overflow: hidden;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        margin-top: 20px;
        margin-left:70px;
        .add{
            margin-top: 100px;
            font-size: 25px;
            margin-bottom: 4px;
        }
        &:hover{
            border: 1px dashed #727272;
            color: #727272
        }
    }
    .list{
        position: relative;
        margin-top: 30px;
        overflow: hidden;
        &:nth-child(odd){
            margin-right: 55px;
        }

        .delete-Introduce{
            position: absolute;
            right: 16px;
            top: 92px;
            font-size: 20px;
            color: #999999;
            cursor: pointer;
            .icon-jian3{
                font-size: 20px;
            }
            &:hover{
                color: #727272;
            }
        }
    }
     .save{
        margin: 40px auto;
        width: 160px;
        clear: both;
    }

}
</style>
